<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="费用名称">
              <a-input placeholder="请输入费用名称" v-model="queryFeeName" :allowClear=true></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="querydata()">查询</a-button>

            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- table区域-begin -->
    <div>

      <a-table
        v-has="'fee:default'"
        size="small"
        :components="components"
        :scroll="{x:500,y:350}"
        ref="table"
        bordered
        rowKey="id"
        :loading="tableLoading"
        :pagination="false"
        :columns="columns"
        :dataSource="datalist"
        class="j-table-force-nowrap">

        <template slot="defLock" slot-scope="text,record">
          <a-icon style="color: #faad14;font-size: 20px" v-if="record.isLock == 1" type="lock" />
          <a-icon style="font-size: 20px" v-else type="unlock" />
        </template>

      </a-table>
      <a-table
        v-has="'fee:approved'"
        size="small"
        :components="components"
        :scroll="{x:500,y:350}"
        ref="table"
        bordered
        rowKey="id"
        :pagination="false"
        :loading="tableLoading"
        :columns="defColumns"
        :dataSource="datalist"
        class="j-table-force-nowrap">

        <template slot="lock" slot-scope="text,record">
          <a-popconfirm
            :title="record.isLock==1?'确定要解锁此费用?':'确定要锁定此费用?'"
            ok-text="确定"
            cancel-text="取消"
            @confirm="lock(record)"
          >
            <a-icon style="cursor:pointer;color: #faad14;font-size: 20px" v-if="record.isLock == 1" type="lock" />
            <a-icon style="cursor:pointer;font-size: 20px" v-else type="unlock" />
          </a-popconfirm>
        </template>

        <span slot="action" slot-scope="text, record">
            <a-popconfirm
              title="确定要撤销审核此费用？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="revoke(record)"
            >
              <a href="#">撤销审核</a>
            </a-popconfirm>
          <a-divider type="vertical" />
            <a-popconfirm
              title="确定要删除此费用？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="del(record)"
            >
              <a href="#">删除</a>
            </a-popconfirm>


        </span>

      </a-table>
    </div>

  </a-card>
</template>

<script>


import { deleteAction, getAction, httpAction, postAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'
import FeeNameDataModal from './modules/FeeNameDataModal'

export default {
  name: 'FeeNameDataList',
  components: {
    FeeNameDataModal
  },
  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props
          const col = this.columns.find(col => {
            const k = col.dataIndex || col.key
            return k === key
          })

          if (!col || !col.width) {
            return h('th', { ...restProps }, [...children])
          }

          const dragProps = {
            key: col.dataIndex || col.key,
            class: 'table-draggable-handle',
            attrs: {
              w: 10,
              x: col.width,
              z: 1,
              axis: 'x',
              draggable: true,
              resizable: false
            },
            on: {
              dragging: (x, y) => {
                col.width = Math.max(x, 1)
              }
            }
          }
          const drag = h('vue-draggable-resizable', { ...dragProps })
          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
        }
      }
    }
    return {
      queryFeeName: '',
      description: '费用名称数据库管理页面',
      datalist: [],
      tableLoading: false,
      columns: [
        {
          title: '#',
          dataIndex: 'rowIndex',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '费用名称',
          align: 'left',
          dataIndex: 'feeName'
        },
        {
          title: '提交人',
          align: 'center',
          width: 150,
          dataIndex: 'submitUser'
        },
        {
          title: '锁定',
          align: 'center',
          width: 80,
          dataIndex: 'lock',
          scopedSlots: { customRender: 'defLock' }
        }

      ],
      // 表头
      defColumns: [
        {
          title: '#',
          dataIndex: 'rowIndex',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '费用名称',
          align: 'left',
          dataIndex: 'feeName'
        },
        {
          title: '提交人',
          align: 'center',
          width: 150,
          dataIndex: 'submitUser'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 200,
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '锁定',
          align: 'center',
          width: 80,
          dataIndex: 'lock',
          scopedSlots: { customRender: 'lock' }
        }

      ],
      url: {
        list: '/fee/list',
        delete: '/fee/deleteBatch',
        deleteBatch: '/feedata/feeNameData/deleteBatch',
        revoke: '/fee/revoke',
        lock: '/fee/lock',
        exportXlsUrl: '/feedata/feeNameData/exportXls',
        importExcelUrl: 'feedata/feeNameData/importExcel'

      },
      dictOptions: {}
    }
  },
  created() {
    this.querydata()
  },
  computed: {},
  methods: {
    checkApprovedRule() {
      console.log(111)
      this.columns = this.defColumns
    },
    querydata() {
      var that = this
      that.tableLoading = true
      let param = {}
      if (this.queryFeeName) {
        param = { feeName: this.queryFeeName }
      }
      getAction(this.url.list, param).then((res) => {
        if (res.success) {
          that.datalist = res.result
          that.datalist.map(function(data, K) {
            data.key = data.id
          })
          // that.$message.success(res.message)
          // that.$emit('allOk')

          // that.selectAll()
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.tableLoading = false
      })
    },
    initDictData() {
    },

    revoke(record) {
      let param = {
        id: record.id
      }
      httpAction(this.url.revoke, param, 'post').then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.queryFeeName = ''
          this.querydata()
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        // that.confirmLoading = false
      })
    },
    del(record) {
      let param = {
        ids: record.id.toString()
      }
      deleteAction(this.url.delete, param).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.queryFeeName = ''
          this.querydata()
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
      })
    },
    lock(record) {
      let param = {
        id: record.id.toString(),
        type: record.isLock == 1 ? 0 : 1
      }
      postAction(this.url.lock, param).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.queryFeeName = ''
          this.querydata()
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style>
.ant-table {
  min-height: 450px !important;
}

.ant-empty-normal {
  margin: 140px 0 !important;
}
</style>
<style lang="less">
.resize-table-th {
  position: relative;

  .table-draggable-handle {
    transform: none !important;
    position: absolute;
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }
}
</style>